<template>
     <div class="layoutLargeScreenBox">
          <div class="headerBox">
               <Header :menuList="userStore.menuRoutes"></Header>
          </div>
          <div class="contentBox">
               <transition name="slideLeft" mode="out-in">
                    <div
                         class="sideBar"
                         :class="{ collapsed: isCollapsed }"
                         v-if="sideBarIsShow"
                    >
                         <SideBar v-model:collapsed="isCollapsed"></SideBar>
                    </div>
               </transition>
               <div class="content">
                    <Breadcrumb />
                    <div class="mainBox" :class="{ expanded: isCollapsed }">
                         <Main></Main>
                    </div>
               </div>
          </div>
     </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SideBar from './sidebar/index.vue'
import Main from './main/index.vue'
import Header from './header/index.vue'
import useUserStore from '@/store/modules/user'
import { useRoute } from 'vue-router'
import Breadcrumb from './breadcrumb/index.vue'

const route = useRoute()
let userStore = useUserStore()
// 侧边栏折叠状态
const isCollapsed = ref(false)
const sideBarIsShow = ref(true)
// 路由切换时，判断是否需要折叠侧边栏
watch(
     () => route,
     (newVal) => {
          if (newVal.meta && newVal.meta.sideBarIsVisible) {
               sideBarIsShow.value = false
          } else {
               sideBarIsShow.value = true
          }
     },
     { immediate: true, deep: true },
)
</script>

<style scoped lang="scss">
.layoutLargeScreenBox {
     width: 100%;
     height: 100vh;
     background-color: var(--layout-theme-color);
     overflow: hidden;

     .headerBox {
          width: 100%;
          height: 65px;
          z-index: 9;
     }

     .contentBox {
          width: 100%;
          height: calc(100% - 65px);
          padding: 5px;
          overflow: hidden;
          display: flex;
          gap: 5px;

          .sideBar {
               width: 160px;
               height: 100%;
               background-color: var(--mainBox-theme-color, #ffffff);
               box-shadow: var(--mainBox-theme-shaow-color);
               border-radius: 8px;
               overflow: hidden;
               transition: all 0.3s ease;
               position: relative;
               flex-shrink: 0;

               &.collapsed {
                    width: 60px;
               }

               // &:hover {
               //      &:not(.collapsed) {
               //           width: 225px;
               //      }
               // }
          }

          .content {
               flex: 1;
               overflow: hidden;
               height: 100%;
               display: flex;
               flex-direction: column;
               gap: 5px;

               .mainBox {
                    background-color: var(--mainBox-theme-color);
                    box-shadow: var(--mainBox-theme-shaow-color);
                    height: 100%;
                    border-radius: 5px;
                    padding: 10px;
                    transition: all 0.3s ease;
                    flex: 1;
                    box-sizing: border-box;
                    overflow: hidden;

                    &.expanded {
                         transition: all 0.3s ease;
                    }
               }
          }
     }
}

// 进入
.slideLeft-enter-active {
     animation: slideInLeft 0.3s ease-in-out forwards;
}

// 离开
.slideLeft-leave-active {
     animation: slideOutLeft 0.3s ease-in-out forwards;
}

@keyframes slideInLeft {
     0% {
          transform: translateX(-150%);
     }

     100% {
          transform: translateX(0);
     }
}

@keyframes slideOutLeft {
     0% {
          transform: translateX(0%);
     }

     100% {
          transform: translateX(-150%);
     }
}
</style>
